将一串 html 属性添加到 html 元素

Question

我有一串用有效 html 编写的属性，我想将这些属性放在实际的 html element 上（而不是元素的 html string）。

例如，我在合理命名的attributesStr 变量中有属性字符串，我想将这些属性添加到#htmlElement div。

var attributesStr = "";
attributesStr += " class='regularClass'"; // Needs to handle key value attributes.
attributesStr += " title='Title... with spaces!'"; // And attributes with spaces.
attributesStr += " style='color: red; font-weight: bold;'"; // And style with multiple properties.
attributesStr += " data-attributenovalue"; // And attributes with no value.

// Your special code to add the attributes to `#htmlElement` goes here.

<div id="htmlElement">
    The HTML element!
</div>

运行 JQuery / JavaScript 代码后，#htmlElement 应如下所示：

<div id="htmlElement" class='regularClass' title='Title... with spaces!' style='color: red; font-weight: bold;' data-attributenovalue>
    The HTML element!
</div>

如何在 JavaScript 或 Jquery 中做到这一点？

---

第一次尝试：我想我可以通过 .split()ing attributesStr 在空格上执行此操作，然后在 = 上拆分每个单独的属性键值对，然后迭代该数组并添加每个键值对使用 JQuery 的 .prop() 或 .attr()，但这不起作用有两个原因：

1. style 和 title 属性会失败，因为它们有空格。
2. 它可能在没有值的属性上失败。

Answer 1

获取attributesStr 并将其插入现有的outerHTML。为此，您需要通过删除现有标记、注入字符串并放回 html 的其余部分来重建节点。

var attributesStr = "";
attributesStr += " class='regularClass'"; // Needs to handle key value attributes.
attributesStr += " title='Title... with spaces!'"; // And attributes with spaces.
attributesStr += " style='color: red; font-weight: bold;'"; // And style with multiple properties.
attributesStr += " data-attributenovalue"; // And attributes with no value.

var element = document.getElementById('htmlElement');

var tag = element.tagName;

element.outerHTML = '<' + tag + attributesStr + element.outerHTML.substring(tag.length + 1);

<div id="htmlElement">
  The HTML element!
</div>

Answer 2

您可以使用 .attr() 在 jquery 中执行此操作。这是工作的sn-p。

click here for attr() usage

$(document).ready(function(){
$("#htmlElement").attr("class", "regularClass");
$("#htmlElement").attr("title", "Title... with spaces!");
$("#htmlElement").attr("style", "color: red; font-weight: bold");
$("#htmlElement").attr("data-attributenovalue",true);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="htmlElement">
    The HTML element!
</div>

Answer 3

试试这个：

var dummHTML = $("<div "+attributesStr+"></div>");   
$.each(dummHTML[0].attributes, function(i,v){
 $('#htmlElement').attr(v.nodeName,v.nodeValue);
});

Answer 4

也许不是最好的选择，但如果需要使用完整的字符串：

想法是：获取元素的内容，然后将其删除并使用新属性再次创建它：

var attributesStr = "";
attributesStr += " class='regularClass'"; // Needs to handle key value attributes.
attributesStr += " title='Title... with spaces!'"; // And attributes with spaces.
attributesStr += " style='color: red; font-weight: bold;'"; // And style with multiple properties.
attributesStr += " data-attributenovalue"; // And attributes with no value.

// Your special code to add the attributes to `#htmlElement` goes here.
var $innerHTML = $("#htmlElement").html()
$("#htmlElement").remove()
var $newElement = "<div id='htmlElement' " + attributesStr + ">" + $innerHTML + "</div>" 

$("body").after($newElement)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="htmlElement">
    The HTML element!
</div>

Answer 5

为什么不用','分隔你的字符串

var attributesStr = "";
attributesStr = attributesStr + " class='regularClass'," ; // Needs to handle key value attributes.
attributesStr = attributesStr +" title='Title... with spaces!',"; // And attributes with spaces.
attributesStr = attributesStr +" style='color: red; font-weight: bold;',"; // And style with multiple properties.
attributesStr = attributesStr +" data-attributenovalue,"; // And attributes with no value.

var array = attributesStr.split(',');

array.forEach(function(item){
 property = item.split('=');
 $('#htmlElement').attr(property[0].trim());
 if(property[1]) $('#htmlElement').attr(property[0].trim(), property[1].trim());
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="htmlElement">
    The HTML element!
</div>

Answer 6

这会让你第一次分裂

attributesStr.match(/[^\s=]+(=['][^']*['])?/g)

结果：

["class='regularClass'", "title='Title... with spaces!'", "style='color: red; font-weight: bold;'", "data-attributenovalue"]

然后在foreach 中，您可以按照您的建议处理 attrs。