JS从多个表单字段中提取部分URL答案

【问题标题】：JS exstract part of URL from multiple form fieldsJS从多个表单字段中提取部分URL
【发布时间】：2020-09-22 17:07:14
【问题描述】：

我有一个包含多个字段的表单，所有字段都属于同一类。这些填充有遵循相同结构的 URL。我正在尝试从每个 URL 中提取相同的部分。到目前为止 var res = x.split('/')[5];将实现这一点，但仅适用于第一个 URL。我也可以使用 var x = document.querySelectorAll(".example") 来更改所有 url，但我找不到组合这两个函数的正确方法。到目前为止，我的代码如下所示：

script>
function myFunction() {
var x = document.querySelectorAll(".example").innerHTML;
var res = x.split('/')[5];
var i;
for (i = 0; i < x.length; i++) {
x[i].innerHTML = res;
}
}
</script>

我环顾四周，但找不到合适的解决方案。提前感谢您的帮助。

【问题讨论】：

var x = document.querySelectorAll(".example").innerHTML; querySelectorAll 没有 innerHTML 方法，因为它是一个 HTML 集合。您需要遍历该集合。
鉴于您正在尝试以某种方式使用 url，我很想看看 html 的示例。我很好奇.innerHTML 是否也是错误的属性。
我们需要使用 HTML。如果您可以在 sn-p 中包含可用的代码，也会更有帮助。我打赌我们可以给你写一个很好的正则表达式来完成你想要的。不要忘记明确指定 1) 输入是什么； 2) 你得到什么输出和 3) 输出应该是什么。

标签： javascript forms url split

【解决方案1】：

所以循环遍历 HTML 集合，这是基于代码的假设。

// Find all the elements
var elems = document.querySelectorAll(".example")
// loop over the collection
elems.forEach(function (elem) {
   // reference the text of the element and split it
   var txt = elem.innerHTML.split("/")[5]
   // replace the text
   elem.innerHTML = txt
})

<div class="example">1/2/3/4/5/a</div>
<div class="example">1/2/3/4/5/b</div>
<div class="example">1/2/3/4/5/c</div>
<div class="example">1/2/3/4/5/d</div>
<div class="example">1/2/3/4/5/e</div>
<div class="example">1/2/3/4/5/f</div>

【讨论】：

我不确定，但我认为 OP 正在使用输入，因此“innerHTML”对他不起作用。我认为他的意思是使用“价值”属性，但我可能错了。