用 JS 重写 HTML

Question

在我的 Javascript 应用程序中，我从端点接收到一行 HTML 代码。我无法更改从该端点收到的 HTML 内容。我想将单选按钮转换为常规按钮，但不知道如何重写它。我收到的 HTML 可以包含任何内容 - 我只想替换单选按钮。

下面是我可能得到的字符串：

<form>
    <input type="radio" name="a" value="1">Option 1
    <br>
    <input type="radio" name="a" value="2">Option 2
</form>

我想把它转换成这个字符串：

<form>
    <input type="button" id="button-a-1" value="Option 1">
    <br>
    <input type="button" id="button-a-2" value="Option 2">
</form>

这是目前的使用方式：

$.post('url', data, function(resp) { $('#content').html(resp.html); });

我认为我可以通过使用 type="button" 查找/替换 type="radio" 来做到这一点，但我不确定如何通过操作字符串将输入标记之后的文本获取到值标记中。并在那里获取一个 id，以便我可以将事件处理程序绑定到它。

Answer 1

使用 DOM 而不使用字符串更容易。将其创建为片段，选择元素并替换它们。

const responseText = `
<form>
    <input type="radio" name="a" value="1">Option 1
    <br>
    <input type="radio" name="a" value="2">Option 2
</form>
`
// create temp element and set the html to it
var temp = document.createElement('div')
temp.innerHTML = responseText
// find the radio buttons
var radios = temp.querySelectorAll('input[type="radio"]')
// loop over each one so we can convert it
radios.forEach(function (rb) {
  // create a button
  const button = document.createElement('input')
  button.type = 'button'
  // set the id with the radio button attributes
  button.id = `button-${rb.name}-${rb.value}` // = `button-' + rb.name + '-' + rb.value'
  // read the next sibling's text and set the value to 
  button.value = rb.nextSibling.nodeValue.trim()
  // remove the text node
  rb.nextSibling.remove()
  // replace the radio button with your new button
  rb.replaceWith(button)
});

console.log(temp.innerHTML)

Answer 2

获取radio之后的text节点，然后根据textnode的内容生成按钮，将radio按钮替换为genrated button。

let html = `<form>
    <input type="radio" name="a" value="1">Option 1
    <br>
    <input type="radio" name="a" value="2">Option 2
</form>`;

// create jQuery object from html content
let $html = $(html);

$html
// filter out all the radio buttons
.find(':radio')
// use replaceWith to iterate and replace with returned element
.replaceWith(function() {
// get the text node which is immediately after the radio
  let textNode = this.nextSibling;
  // get its textcontent
  this.value =
  // remove text node
    textNode.remove();
    // generate button and return
  return $('<input>', {
    type: 'button',
    id: `button-${this.name}-${this.value}`,
    value: textNode.nodeValue.trim()
  })
})

$('#content').html($html);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="content"></div>

---

或者，您也可以修改现有的input 元素而不创建新元素。

let html = `<form>
    <input type="radio" name="a" value="1">Option 1
    <br>
    <input type="radio" name="a" value="2">Option 2
</form>`;

// create jQuery object from html content
let $html = $(html);

$html
  // filter out all the radio buttons
  .find(':radio')
  // iterate and update the element
  .each(function() {
    // get the text node which is immediately after the radio
    let textNode = this.nextSibling;
    // get its textcontent
    this.value =
      // remove text node
      textNode.remove();

    // change properties

    this.type = 'button';
    this.id = `button-${this.name}-${this.value}`;
    this.value = textNode.nodeValue.trim();

  })

$('#content').html($html);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="content"></div>

Answer 3

使用 jQuery .attr() 函数

$("input").attr('type', 'button');

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
    <input type="radio" name="a" value="1">Option 1
    <br>
    <input type="radio" name="a" value="2">Option 2
</form>

Answer 4

您只需使用javascript 就可以做到这一点

const form = document.querySelector("form");
const inputs = document.querySelectorAll("input");

inputs.forEach((input, index) => {

  input.setAttribute("type", "button")
  input.setAttribute("value", `option ${index +1}`)
  input.setAttribute("id", `button-${input.getAttribute("name")}-${index+1}`)

})

form.innerHTML = form.innerHTML.replace(/Option\s[1-9]/g, "")

console.log(form.innerHTML)

<form>
  <input type="radio" name="a" value="1">Option 1
  <br>
  <input type="radio" name="a" value="2">Option 2
</form>