gpt4 book ai didi

JavaScript:给定 HTML 字符串中的偏移量和子字符串长度,父节点是什么?

转载 作者:塔克拉玛干 更新时间:2023-11-02 20:39:09 27 4
gpt4 key购买 nike

我当前的项目需要在元素的文本内容中定位一个字符串数组,然后将这些匹配的字符串包装在 <a> 中使用 JavaScript 的元素(为清楚起见,此处简化了要求)。我需要尽可能避免使用 jQuery - 至少包括完整的库。

例如,给定这个 HTML block :

<div>
<p>This is a paragraph of text used as an example in this Stack Overflow
question.</p>
</div>

和这个要匹配的字符串数组:

['paragraph', 'example']

我需要达到这个目的:

<div>
<p>This is a <a href="http://www.example.com/">paragraph</a> of text used
as an <a href="http://www.example.com/">example</a> in this Stack
Overflow question.</p>
</div>

我已经通过使用 innerHTML() 找到了解决方案方法和一些字符串操作 - 基本上使用偏移量(通过 indexOf() )和数组中字符串的长度在适当的字符偏移处将 HTML 字符串分开并插入 <a href="http://www.example.com/"></a>在需要的地方标记。

然而,一个额外的要求让我难住了。我不允许在 <a> 中包装任何匹配的字符串元素,如果它们已经在一个元素中,或者它们是标题元素( <h1><h6> )的后代。

因此,给定上面相同的字符串数组和这个 HTML block (顺便说一下,术语匹配必须不区分大小写):

<div>
<h1>Example</a>
<p>This is a <a href="http://www.example.com/">paragraph of text</a> used
as an example in this Stack Overflow question.</p>
</div>

我需要忽略 <h1> 中出现的“Example”元素,以及 <a href="http://www.example.com/">paragraph of text</a> 中的“段落” .

这对我来说意味着我必须确定每个匹配的字符串在哪个节点中,然后遍历它的祖先直到我命中 <body> ,检查我是否遇到 <a><h_>沿途的节点。

首先,这听起来合理吗?有没有我没有考虑过的更简单或更明显的方法?查找边界标记的正则表达式或其他基于字符串的比较似乎并不可靠 - 我正在考虑诸如自闭合元素、不规则嵌套标记等问题。还有 this ...

其次,这是否可能,如果可能,我将如何处理?

最佳答案

您可能应该迭代 dom 元素。这是一个简单的递归dom迭代器,你可以填写其余部分:

function iterateDom (node) {
switch (node.nodeType) {
case 1: // ELEMENT_NODE
{
if (node.tagName != "H1") {
for (var i=0; i<node.childNodes.length; i++)
iterateDom(node.childNodes[i]);
}
}
break;
case 3: //TEXT_NODE
{
// node.nodeValue = node.nodeValue.replace(...);
break;
}
return true;
}

关于JavaScript:给定 HTML 字符串中的偏移量和子字符串长度,父节点是什么?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/2796550/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com