如何在页面加载时替换多个标签中单词的实例？

Question

试图替换一个可能会出现在剃刀视图中数据库项的foreach循环中的单词。

我到目前为止尝试过的

<section class="section bg-gray">
    <div class="container">
        <div class="row gap-y">
            @foreach (var item in Model)
            {
                <div class="col-md-6 col-lg-4">
                    <div class="card d-block">
                        <p class="text-justify">@item.Text</p>
                        <p class="text-center mt-7">
                            <a class="btn btn-primary" href="#">Read more</a>
                        </p>
                    </div>
                </div>
            }
        </div>

        <script src="~/Scripts/jquery-3.3.1.min.js"></script>
        <script type="text/javascript">
            $(document).ready(function () {
                var elements = getElementsByClassName("text-justify");
                $(elements).each(function(element) {
                    element.innerHTML = element.innerHTML.replace(/wordToReplace/g, 'newWord');
                });
            });
        </script>
    </div>
</section>

对不起，可怜的JavaScript，我是新来的。我寻找类似的问题，但更密切的主题通常是替换一个标签中的一个单词的实例。请帮帮忙。

Answer 1

为此您不需要jQuery --您可以使用document.querySelectorAll，只需替换与选择器匹配的元素的所需文本。

请注意，我回避了一个文本元素，并为所需的类提供了一个文本元素，并将说明替换为，以演示使用情况。

​

let elements = document.querySelectorAll(".text-justify");

elements.forEach(function(element){
  let textContent = element.innerText;
  let newTextContent = textContent.replace(/justify/g, 'justified');
  element.innerText = newTextContent;
})

<p class="text-justify">This is a text with the class of text-justify</p>
<p>This is a text without the class of text-justify</p>
<p class="text-justify">This is a text with the class of text-justify</p>

​

Answer 2

为此您不需要jQuery --使用一个简单的forEach循环。我还重构了您代码的其他部分(例如您缺少document )

document.getElementsByClassName("text-justify").forEach(element => element.innerHTML = element.innerHTML.replace(/word/g, "newWord"));

但是，如果您真的想使用jQuery：

$(".text-justify").html((index, element) => element.replace(/word/g, "newWord"));