我花了幾個小時尋找解決方案，但沒有任何樂趣。所以...
我想根據輸入生成 ID。例如在整個網站上；
<p class ="dynamic">I like cheese</p>
The outcome would be...
<p id ="i_like_cheese" class ="dynamic">I like cheese</p>
基本上，無論文本是什么，id 都會反映出來。任何關于從哪里開始的建議將不勝感激！
uj5u.com熱心網友回復：
使用querySelectorAll獲取所有具有 class 的元素，dynamic然后在每個元素上回圈p并id從innerText設定，您預先將空格替換為 '_' 和replace()
let ps = document.querySelectorAll('.dynamic');
ps.forEach(p=>{
p.id = p.innerText.replaceAll(' ','_');
console.log(p.id)
})<p class ="dynamic">I like cheese</p>
<p class ="dynamic">I dont like cheese</p>uj5u.com熱心網友回復：
似乎是一個可怕的想法......但是
$( "p.dynamic" ).each(function() {
var newStringForID = $( this ).text();
var newID = newStringForID.replace(/\s /g, '_').toLowerCase();
$( this ).attr( "id", newID );
console.log('dynamix ID set to ' newID )
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p class="dynamic">test 1</p>
<p class="dynamic">test 2</p>
<p class="dynamic">test 2 with more text </p>
<p class="dynamic">test 3</p>
<p class="dynamic">test4 gfdsg gfd </p>
<p class="dynamic">test5 <span>test</span></p>
<p class="dynamic">test6 <a href="#link">Link</a></p>
<p class="dynamic">test7</p>
<p class="dynamic">test8</p>uj5u.com熱心網友回復：
function nw_store_variable(ele) {
let newVariable = ele.value;
let st = ' ';
let regX = new RegExp(st, "gim");
// return this.newVariable.description;
let strippedSpace = newVariable.replace(regX, '_');
let properCase = strippedSpace.toLowerCase();
let removerepeatedUndrScr = properCase.replace('--', '_'); //replace with recursive in future
let e = document.querySelector('.dynamic');
console.log(e)
e.id = removerepeatedUndrScr;
return
}<p class="dynamic">
<input onkeyup="nw_store_variable(this)"> I like cheese</p>
The outcome would be...
<p class="dynamic">I like cheese</p>uj5u.com熱心網友回復：
使用 querySelectorAll 按類名過濾 DOM 元素，
var lst = document.querySelectorAll('.dynamic')
遍歷回傳串列的所有元素，并根據 HTML 元素的內部文本中的有效字符設定 id。但是，在此級別，您必須考慮 HTML 版本（4 或 5），因為版本 4 和 5 之間的命名約定不同。
版本4： （https://www.w3.org/TR/html4/types.html#type-id）ID和名稱標記必須以字母開頭（[A-ZA-Z]）和之后可以是任何數量的字母、數字 ([0-9])、連字符 ("-")、下劃線 ("_")、冒號 (":") 和句點 (".")。
5版：（https://www.w3.org/TR/html5-author/global-attributes.html#the-id-attribute）id值必須不包含任何空格字符。
為安全起見，我將假設您的網站使用 HTML4，并相應地進行。
//use regex to validate input with respect to HTML4 specifications
function isIdValid(id) {
let re = new RegExp(/^[A-Za-z] [\w\-\:\.]*$/);
return re.test(id);
}
var counterID = 1;
function generateuuid() {
return "id_" counterID.toString();
counterID =1;
}
var lst = document.querySelectorAll('.dynamic');
lst.forEach(htmlelem => {
if (isIdValid(htmlelem.innerText.replaceAll(' ', '_'))) {
htmlelem.id = htmlelem.innerText.replaceAll(' ', '_');
}
else {
htmlelem.id = generateuuid();
//another approach would be to remove invalid characters from the inner
//text, and assign the value to htmlelem.id but this has a performance
//drawback, because it would require looping over each character.
}
})
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/336946.html
標籤：javascript html 查询