我有一个 HTML 文档:
<html>
<body>
<p>
A funny joke:
<ul>
<li>do you know why six is afraid of seven?
<li>because seven ate nine.
</ul>
Oh, so funny!
</p>
</body>
</html>
现在我想识别第一次出现的“七”并用
标记它<span id="link1" class="link">
如何实现这一点？
您是否必须解析 DOM 树，或者是否可以获取正文部分中的整个代码，然后搜索该单词？
在这两种情况下，当我在某处找到这个词后，如何识别它并将其 DOM-parent 更改为 span(我猜这就是必须要做的)，然后添加提到的属性？
这并不是我所期望的代码，而是什么方法或概念可以完成这项工作。
我对框架解决方案不太感兴趣，而是对纯 JavaScript 方式感兴趣。
最佳答案
您需要找到一个类型为 TEXT_NODE (3) 并包含您期望的单词的 DOM 节点。当您需要将该节点拆分为三个时。
第一个是 TEXT_NODE，其中包含您搜索的单词之前的文本，第二个是包含您搜索的单词的 SPAN 节点，第三个是另一个包含原始节点尾部的 TEXT_NODE(全部在搜索单词之后)。
这是源代码...
<html>
<head>
<style type="text/css">
.link {
color: red;
}
</style>
</head>
<body>
<p>
A funny joke:
<ul>
<li>do you know why six is afraid of seven?
<li>because seven ate nine.
</ul>
Oh, so funny!
</p>
<script type="text/javascript">
function search(where, what) {
var children = where.childNodes;
for(var i = 0, l = children.length; i < l; i++) {
var child = children[i], pos;
if(child.nodeType == 3 && (pos = child.nodeValue.indexOf(what)) != -1) { // a TEXT_NODE
var value = child.nodeValue;
var parent = child.parentNode;
var start = value.substring(0, pos);
var end = value.substring(pos + what.length);
var span = document.createElement('span');
child.nodeValue = start;
span.className = 'link';
span.id = 'link1';
span.innerHTML = what;
parent.appendChild(span);
parent.appendChild(document.createTextNode(end));
return true;
} else
if(search(child, what))
break;
}
return false;
}
search(document.getElementsByTagName('body')[0], 'seven');
</script>
</body>
</html>
关于javascript - 如何使用 html 文档中的 javascript 动态寻址单词/字符串，然后对其进行标记？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/5405942/