使用第二次出现的 span 标签包装字符串的 rest

Question

I'm trying to wrap part of the string with span tag.我正在尝试用 span 标签包装部分字符串。 i'm trying to find the second occurrence of dot .我试图找到 dot 的第二次出现. and from there the rest of the string should be wrapped in span tag.从那里开始，字符串的 rest 应该被包裹在 span 标签中。

Here is what i've been trying to do.这是我一直在尝试做的事情。

<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 JS

let getCopy = function(){
    var para = document.querySelector('.story').textContent;
    var hiddenpara = para.replace('.','<span class="hiddenText">.</span>',2)
    console.log(hiddenpara)
}

getCopy()

CSS CSS

.hiddenText{
    display:none;
}

Answer 1

You could create a new span element underneath the p and assign all the text after the second .您可以在p下创建一个新的span元素，并在第二个之后分配所有文本. to it:对它：

 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>

Answer 2

 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>

Answer 3

This would be one way to do it.这将是一种方法。 Explanation within the comments of the code.代码注释中的解释。

 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>

使用第二次出现的 span 标签包装字符串的 rest

问题描述

3 个解决方案

解决方案1
1 已采纳 2022-09-05 07:55:14

解决方案2
0 2022-09-05 07:51:30

解决方案3
0 2022-09-05 07:57:15

使用第二次出现的 span 标签包装字符串的 rest

问题描述

3 个解决方案

解决方案1 1 已采纳 2022-09-05 07:55:14

解决方案2 0 2022-09-05 07:51:30

解决方案3 0 2022-09-05 07:57:15

解决方案1
1 已采纳 2022-09-05 07:55:14

解决方案2
0 2022-09-05 07:51:30

解决方案3
0 2022-09-05 07:57:15