使用 JavaScript split 来包含单词,标点符号与 span 但忽略 HTML
Using JavaScript split to encompass words, punctuation with span but ignore HTML
我知道有些主题几乎涵盖了相同的主题,但我找不到一个可以帮助我实现我需要的主题。
所以我有一些带有单词、标点符号和 HTML 的文本,比如
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean semper elit efficitur tempus sagittis. Vivamus at eros — quis velit ornare consequat. Vestibulum suscipit erat enim; sed bibendum augue interdum at.</p>
<p>Sed vulputate ipsum id ullamcorper vehicula. Ut ac ornare risus, id vehicula justo. Quisque pretium, lectus "et rutrum fermentum", leo mauris interdum eros, nec blandit nibh dolor nec enim.</p>
我想做的是用<span>
元素包含每个单词和标点符号,同时忽略并保持HTML标签不变。我需要包含每个标点符号,即使它们彼此相邻或一个单词。
所以输出将是这样的
<p><span>Lorem</span> <span>ipsum</span> <span>sit</span> <span>sit</span> <span>amet</span><span>,</span> (etc...)
到目前为止,我已经设法按空格拆分并用 <span>
包含结果,但 HTML 标签和标点符号令人头疼。 :P
提前感谢!
编辑:
这是我到目前为止使用的代码(如您所见,要拆分的文本位于带有 id=textarea
的 div
元素中:
$('#textarea').each(function(){
var text = $(this).html().split(" "),
len = text.length,
result = [];
for( var i = 0; i < len; i++ ) {
result[i] = '<span class="clickable">' + text[i] + '</span>';
}
$(this).html(result.join(' '));
});
你在用jQuery吗?如果是这样,您可以使用.text()
来解决标记和语法,从而相当容易地做到这一点。
http://jsfiddle.net/r6dz97ud/
$("p").each(function(i, p) {
var words = $(p).text()
$(p).html("")
$(words.split(" ")).each(function(j, word) {
var span = $("<span></span>")
span.html(word)
$(p).append(span).append(" ")
});
});
以下是对任何 html 字符串值执行此操作的通用解决方案:
var tagsexpr = "(''<''w+''>)|(''<''/''w+''>)";
var wordexpr = "[^''<?''/|>| ]''w+";
var puncexpr = "[''.,''?''!]";
function wrap(text) {
var tags = text.match(new RegExp(tagsexpr, 'g'));
var words = text.match(new RegExp(wordexpr + '|' + puncexpr, 'g'));
return tags[0] + words.reduce(function (base, curr, indx) {
return (new RegExp(puncexpr, 'g')).test(words[indx + 1]) ?
base + '<span>' + words[indx] + '</span>' : base + '<span>' + words[indx] + '</span> ';
}, '').trim() + tags[1];
}
console.log(wrap('<p>hello from the matrix.</p>'));
// => "<p><span>hello</span> <span>from</span> <span>the</span> <span>matrix</span><span>.</span></p>"
相关文章:
- Javascript/jQuery:用HTML span标记替换单引号中的文本
- HTML span id 作为 JavaScript 函数参数
- 使用 JavaScript split 来包含单词,标点符号与 span 但忽略 HTML
- 用jQuery.html更新span内部html在IE中不起作用
- 如何在jsp文件的span标记上呈现来自JavaScript的html代码
- 使用javascript在span中显示html内容
- Jquery onmouseover()函数处理动态html图像和span
- 如何在html(span标记)中加载javascript函数
- Kendo UI-将Text()括起来的文本转换为<span>编码HTML
- 如何使用 jQuery 将 span 标签添加到所选文本并将更改永久保存在本地 html 文件中
- 如何根据用户输入 HTML 更新多个 SPAN 元素
- 如何将 html 中的 span 值传递给其他页面
- 将占位符值替换为单击的 span 标记的内部 HTML
- 如何使用 jQuery 设置 span 元素的内部 HTML
- 使用 jQuery 从 SPAN 获取所有 HTML
- 如何从HTML<输入>元素设置为<span>使用JavaScript.innerHTML
- 用span类替换HTML字符串中的一些innerText并发布回DOM
- 当还有SPAN时,从内部html中提取td值
- HTML行span不适用于Javascript
- JavaScript/jQuery getSelection突出显示合并span-html元素