如何使用 JavaScript 将文本前后的内联 html 元素替换为另一个 html 元素？

Question

我知道，这似乎是一个非常简单、直接的问题，但请耐心等待一分钟。

假设我们有一个看起来像这样的 HTML 文档：

<html>
<head>
  <title>My Awesome Example.</title>
</head>
<body>
<p>World History is fascinating but can also be overwhelming because of its 
sheer magnitude. Every historian brings their own <span class="blank-it">lens</span>
to historical interpretation so one must not only know the historical events but 
also use <span class="blank-it">reasoning</span> skills to determine when a 
historian's perspective is distorting the actual historical record.</p>
</body>
</html>

现在假设我们要替换每个出现的 <span class="blank-it"> 并将其替换为另一个元素和原始元素的内部 HTML。所以最终结果会是这样的：

<input type="text" id="lens115">
<input type="text" id="reasoning118">

问题在于元素与文本内联。我想出了一些看起来像这样的代码：

// Get the element to be replaced
let blankhtml = document.getElementByClassNames("blank-it");
// Get the text we'll use as the ID of our new element
let blanktext = document.getElementByClassNames("blank-it").innerHTML;
// Create a variable to hold input text box code
let inputtext = '<input type="text" id="' . blanktext . '" class="blank-input">';
// Prepend the input box before the blankhtml element
// Remove the old element.

这就是我卡住的地方。因为好像不管我用insertBefore还是removeChild它都要我指定父元素。但是我怎么知道呢？在上面的示例中，它是一个简单的 <p> 元素，但是如果代码看起来像这样呢：

<html>
<head>
<title>Something Goes Here</title>
</head>
<body>
<p>This is a <span class="important-text"><span class="blank-it">an important fact.</span><span>
</body>
</html>

在这种情况下理想情况下应该只有一个跨度，但我们讨论的是用户输入的内容，所以我不能保证不会出现这种情况。

我确定这仍然是一个相当容易解决的问题，只是比告诉我使用 replaceChild 等稍微复杂一些。有什么想法吗？

Answer 1

这是一个粗略的入门指南，它用一个以跨度的 innerHTML 为值的输入替换每个跨度。

首先您需要遍历集合，创建一个新元素来替换每个实例，然后使用 parentNode.replaceChild(newChild, existingChild)

新元素attributes/classes你可以随意装扮

document.querySelectorAll(".blank-it").forEach(el => {
    const input = document.createElement('input');    
    input.value = el.innerHTML;
    input.classList.add('blank-input');
    el.parentNode.replaceChild(input, el);
});

.blank-input{color:red}

<p>World History is fascinating but can also be overwhelming because of its 
sheer magnitude. Every historian brings their own <span class="blank-it">lens</span>
to historical interpretation so one must not only know the historical events but 
also use <span class="blank-it">reasoning</span> skills to determine when a 
historian's perspective is distorting the actual historical record.</p>

Answer 2

您是否尝试过使用 outerHTML 替换元素，而不是使用 insertBefore/removeChild？

如果我没理解错的话，你想用一个输入替换你的跨度，对吗？

看看下面的代码片段是否能帮到您：

// Get elements to be replaced
let blankElements = Array.from(document.getElementsByClassName("blank-it"));

blankElements.forEach(blankElement => {
  // Get the text we'll use as the ID of our new element
  let blanktext = blankElement.innerHTML;
  // Create a variable to hold input text box code
  let inputtext = '<input type="text" id="' + blanktext + '" class="blank-input">';
  blankElement.outerHTML = inputtext;
})

<html>
<head>
  <title>My Awesome Example.</title>
</head>
<body>
<p>World History is fascinating but can also be overwhelming because of its 
sheer magnitude. Every historian brings their own <span class="blank-it">lens</span>
to historical interpretation so one must not only know the historical events but 
also use <span class="blank-it">reasoning</span> skills to determine when a 
historian's perspective is distorting the actual historical record.</p>
</body>
</html>

如何使用 JavaScript 将文本前后的内联 html 元素替换为另一个 html 元素？

How to use JavaScript replace an inline html element preceded and followed by text with another html element?

javascript

html

dom

removechild