我正在尝试用span标记包装部分字符串。我试图找到点.的第二个出现，从那里开始，字符串的其余部分应该被包装在span标签中。
以下是我一直在努力做的事情。
<h2>Blah blah blah</h2>
<p class="story">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas vitae scel erisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta.</p>
JS-
let getCopy = function(){
var para = document.querySelector('.story').textContent;
var hiddenpara = para.replace('.','<span class="hiddenText">.</span>',2)
console.log(hiddenpara)
}
getCopy()
CSS
.hiddenText{
display:none;
}
您可以在p下面创建一个新的span元素，并将第二个.之后的所有文本分配给它：
const para = document.querySelector('.story')
text = para.textContent
const content = text.split('.')
para.textContent = content.splice(0, 2).join('.') + '.'
const span = document.createElement('span')
span.classList.add('hiddenText')
const spanContent = document.createTextNode(content.join('.'))
span.appendChild(spanContent)
para.appendChild(span).hiddenText {
color: red;
}<h2>Blah blah blah</h2>
<p class="story">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas vitae scel erisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta.</p>let getCopy = function(){
let cnt = 0;
var para = document.querySelector('.story');
var hiddenpara = para.textContent.split('.');
hiddenpara[1] = "<span class='hidden'>" + hiddenpara[1];
hiddenpara[hiddenpara.length - 1] = hiddenpara[hiddenpara.length - 1] + "</span>";
para.innerHTML = hiddenpara.join('.');
}
getCopy();.hidden {
color: red
}<html>
<body>
<h2>Blah blah blah</h2>
<p class="story">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas vitae scel erisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta.</p>
</body>
</html>这是一种方法。代码注释中的解释。
function getPosition(string, subString, index) {
return string.split(subString, index).join(subString).length;
}
const getCopy = function(str){
// Get position of the second dot
const dotIndex = getPosition(str, '.', 2) + 1;
// Split string into array at the second dot
const strArray = [str.slice(0, dotIndex), str.slice(dotIndex)];
// Add the span element
strArray[1] = '<span class="hiddenText">'+strArray[1]+'</span>';
// Join array back into a string and return it.
return strArray.join();
}
console.log(getCopy(document.querySelector(".story").innerText));<h2>Blah blah blah</h2>
<p class="story">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas vitae scel erisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta.</p>