拆分文本并将其包装在 span 元素中答案

【问题标题】：Split text and wrap it in the span element拆分文本并将其包装在 span 元素中
【发布时间】：2020-09-23 10:19:17
【问题描述】：

我正在尝试将标签内的句子看起来像这样：

<p>Hello world. Lorem ipsum lorem.</p>

并通过 JS/jQuery 对其进行转换：

<p><span>Hello world.</span> Lorem ipsum lorem.</p>

我唯一想到的是 wrapAll() 方法，但我怎么能确定我可以选择正确的文本 - 所以第一部分包括点 (Hello world.)？

【问题讨论】：

这能回答你的问题吗？ Select first 2 words with jQuery and wrap them with <span> tag
没有必要split 或wrapAll() 看到上面的副本。只需使用简单的 regex 替换即可
谢谢，部分 - 我想在点之前包装所有内容，包括点。所以 2-3 或 n 个单词
这能回答你的问题吗？ Split String Into Array Elements Based On Punctuation In String - JavaScript

标签： javascript html jquery css

【解决方案1】：

你可以用一个简单的 JS 脚本来做：

let el = document.querySelect('...')
let str = el.innerText;
let indx = str.indexOf('.',0) + 1;
el.innerText = "<span>${str.substr(0,indx)}</span>${str.substr(indx)}"

【讨论】：

谢谢，这看起来不错，它只是将 span 标签直接打印到视图中。我试图以某种方式逃避它

【解决方案2】：

您应该更具体：您到底想在 span 中包含什么？段到第一句的部分？

如果是这样，你必须检查第一期的索引：

const ParagraphHTML = $('p#yourParagraph').html();
const PeriodIndex = ParagraphHTML.indexOf('.');

然后，您可以将字符串分成两部分，并用 span 连接它们：

const String1 = ParagraphHTML.slice(0,PeriodIndex+1);
const String2 = ParagraphHTML.slice(PeriodIndex+1);
const ResultString = `<span>${String1}</span>${String2}`;
$('p#yourParagraph').html(ResultString);

正如你在帖子中提到的，我使用了 jQuery。使用比需要更多的变量来提高可读性。

【讨论】：