Javascript-通常只替换文本

我只想替换给定元素的文本，它应该是它自己的函数

例如，类似这样的内容：

<div id="thisDivIsGettingTargeted">
    <span>
        Edit me!
        <i class="fas fa-edit"></i>
    </span>
</div>

下面是另一个例子：

<span class="text-one-liner">
    <span class="name">
        Username
        <span data-tooltip="A tooltip">
            <i class="fas fa-crown"></i>
        </span>
    </span>
</span>

用户名

.text一行

是目标，应该更改“用户名”。

如果（且仅当）您的函数始终返回

i

标记元素（如您所说），并且您的文本节点正好在该

i

之前，请尝试此操作

const get_object = element => {
    if (!element.hasAttribute("data-liner-stop-search") && element.childElementCount === 1){
        return get_object(element.firstElementChild)
    }
    return element.previousSibling;
};

或者，您可以循环遍历目标元素的所有子元素（使用

.getElementsByTagName（“*”

），并检查元素的

节点类型<文本节点的code>nodeType

是

3

。如果所有子节点中只有一个文本节点，则循环中的以下（通用）条件将起作用

（根据@josh.trow的建议更新）

---

您可以找到

节点类型的引用

您可以通过对节点类型属性进行筛选来完成此操作。请注意，用于格式化代码的空白也显示为子节点。您可能也希望对这些进行筛选，如下面的示例所示（

node.nodeValue.trim（）！==”

）

document.querySelector（'#ThisDivisionGettingTargeted span'）.childNodes.forEach（（node）=>{
if（node.nodeType==node.TEXT\u node&&node.nodeValue.trim（）！==“”）{
node.nodeValue=“新文本”；
}
});

编辑我！
仅适用于此特定示例，但我需要一个通用解决方案。文本也可能位于标记之后或多个标记之间。我怀疑，由于HTML空格作为文本节点计数（除非内容被压缩），您可能会在这方面遇到许多错误标志-您还需要验证内容是否为空（
if（element[I].nodeType==3&&element[I].innerText.trim（）.length）
或类似的内容that@josh.trow我编辑了答案并添加了
！element[I].innerText.trim（）.length
作为第二个检查您可以检查。但我也认为那里的许多答案都过时了/JQuery，因此我不会将其标记为重复。谢谢，但这又是一个特定的解决方案。我希望有一个函数，在该函数中，我将我的
thisDivisingTargeted
传递为（例如）
元素
和一个新的
文本
，该函数将自动搜索并替换该文本节点。@Myzel394您可以轻松地将此逻辑包装到一个函数中，该函数为您执行此操作。也许您只需要构建一些逻辑来查找“孙子”还有其他的后代。我想我试过了。我在我的功能中试过了。我在我的问题中发布了它，但它不起作用。你有什么想法吗？
<span class="text-one-liner">
    <span class="name">
        Username
        <span data-tooltip="A tooltip">
            <i class="fas fa-crown"></i>
        </span>
    </span>
</span>

const get_object = element => {
    if (!element.hasAttribute("data-liner-stop-search") && element.childElementCount === 1){
        return get_object(element.firstElementChild)
    }
    return element.previousSibling;
};

if (element[i].nodeType === 3 && !element[i].innerText.trim().length)
    return element[i]