如何使用 JavaScript 将文本前后的内联 html 元素替换为另一个 html 元素?
How to use JavaScript replace an inline html element preceded and followed by text with another html element?
我知道,这似乎是一个非常简单、直接的问题,但请耐心等待一分钟。
假设我们有一个看起来像这样的 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 等稍微复杂一些。有什么想法吗?
这是一个粗略的入门指南,它用一个以跨度的 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>
您是否尝试过使用 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>
我知道,这似乎是一个非常简单、直接的问题,但请耐心等待一分钟。
假设我们有一个看起来像这样的 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 等稍微复杂一些。有什么想法吗?
这是一个粗略的入门指南,它用一个以跨度的 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>
您是否尝试过使用 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>