Преобразование некоторого текста внутри элемента в сам элемент с использованием JavaScript

Question

Возможно ли это, используя JavaScript или JQuery, или что-то еще?

Допустим, у меня есть файл HTML, подобный этому

<div>
    <p>Hello World</p>
</div>

И я хочу включить " World "в сам элемент span, например так (чтобы я мог стилизовать только" World ")

<div>
    <p>Hello <span>World</span></p>
</div>

Answer 1

Поскольку в вашем вопросе много неизвестных, поэтому я предполагаю, что вы уже знаете строку / слово, вокруг которых вы хотите добавить тег html.

Помня об этом, следующее решение должно работать:

HTML:

<div>
    <p id="my-text">Hello World, Again!</p>
</div>

JavaScript:

    const stringToBeReplaced = "World"; // what you want to replace
    const innerText = document.getElementById("my-text").innerText; //grab the text
    const beginIndex = innerText.indexOf(stringToBeReplaced); // get text where string begins

    // if string exists
    if (beginIndex >= 0) {
    const textWithTag =
              "<span style='color: red'>" + stringToBeReplaced + "</span>";
    const newString = innerText.replace(stringToBeReplaced, textWithTag);
    // replace the text with new string
    document.getElementById("my-text").innerHTML = newString;
   }

Надеюсь, это то, что вы просили и искали.

Answer 2

https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_replace3

str.replace решает задачу. Комментарий @Umer Hassan правильный.