如何用JavaScript遍历表单字段数组替换含PHP变量值的内容

需求说明 #

我搭建了售卖唱片的网站，现有HTML表单、PHP变量，希望通过单个按钮调用JavaScript函数，遍历预定义的tracks数组，将数组对应表单字段中包含PHP变量$tit值的内容替换为“!!”。现有代码仅能处理单个字段，需修改实现批量处理。

原始代码片段 #

HTML表单

<input type="text" name="artist" id="artist" class="txt" />
<input type="text" name="title" id="title" class="txt" />
<input class="tracks" name="a1" id="a1" >
<input class="tracks" name="a2" id="a2" >
<input class="tracks" name="a3" id="a3" >

PHP变量

$tit = "random title";

原有单字段处理JS及按钮

<input type="button" class="button-8" value="change" name="no" onclick="spling('a1','<?php echo $tit; ?>');">

<script>
function spling(v,t) {
    var txt=document.getElementById(v).value;
    var uc= t.toUpperCase()
    if (txt.toUpperCase().indexOf(uc) >=0) {
        txt =txt.replace(t,'!!');
        document.getElementById(v).value=txt;
    } else {
        document.getElementById('res').innerHTML = t+" not found in field "+v;  
    }
}
</script>

修改后的完整代码 #

整合后的HTML+PHP

<input type="text" name="artist" id="artist" class="txt" />
<input type="text" name="title" id="title" class="txt" />
<input class="tracks" name="a1" id="a1" >
<input class="tracks" name="a2" id="a2" >
<input class="tracks" name="a3" id="a3" >

<!-- 用于显示结果提示的容器 -->
<div id="res"></div>

<!-- 修改后的按钮，调用批量处理函数 -->
<input type="button" class="button-8" value="change" name="no" onclick="processAllTracks('<?php echo $tit; ?>');">

<?php
$tit = "random title";
?>

批量处理的JavaScript

// 预定义需要处理的字段ID数组
var tracks = ['a1', 'a2', 'a3'];

function processAllTracks(t) {
    // 清空之前的提示信息
    const resultEl = document.getElementById('res');
    resultEl.innerHTML = '';
    
    // 遍历所有目标字段
    tracks.forEach(fieldId => {
        const field = document.getElementById(fieldId);
        const txt = field.value;
        const ucTarget = t.toUpperCase();
        
        if (txt.toUpperCase().indexOf(ucTarget) >= 0) {
            // 替换匹配内容（仅替换第一个匹配项）
            // 若需全局替换所有匹配项，改用：txt.replace(new RegExp(t, 'gi'), '!!')
            const updatedTxt = txt.replace(t, '!!');
            field.value = updatedTxt;
        } else {
            // 追加未找到的提示信息
            resultEl.innerHTML += `${t} not found in field ${fieldId}<br>`;
        }
    });
}

关键修改点 #

1. 按钮事件调整：将按钮的onclick改为调用批量处理函数processAllTracks，直接传入PHP变量$tit
2. 新增批量处理函数：通过forEach遍历tracks数组，对每个字段执行原有检查和替换逻辑
3. 提示信息优化：清空原有提示后，逐个追加未找到目标值的字段提示，避免覆盖
4. 可选全局替换：如果需要替换字段内所有出现$tit的内容，将替换语句改为正则全局匹配模式

内容的提问来源于stack exchange，提问作者matt