Symfony 3.3项目中JQuery脚本无法运行问题求助

我一眼就揪出了导致脚本失效的核心问题，另外还有几个小细节可以优化，咱们一步步来搞定：

核心错误：Script标签混用src和内部代码 #

你把jQuery的引入和自定义JavaScript代码塞在了同一个<script>标签里——带src属性的script标签不能包含内部代码，浏览器会直接忽略标签里的所有自定义逻辑，这就是脚本完全没反应的主要原因。必须把jQuery引入和你的代码分成两个独立的script标签。

次要优化：确保DOM加载完成后执行代码 #

如果你的脚本放在页面顶部，DOM元素（比如#myId、#myCode）可能还没渲染出来，jQuery就尝试操作它们了，也会导致失效。最好把代码放在$(document).ready()回调里，或者直接把脚本放在页面的</body>标签前。

修正后的完整代码 #

YouTube ID: <span id="myId"></span> <br /> <br />
Embed code: <pre id="myCode"></pre>
{{ cours.description }} {{ cours.prerequis }}

<!-- 单独引入jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- 自定义脚本放在独立的script标签里 -->
<script>
function getId(url) {
    // 优化正则，覆盖更多YouTube URL格式
    var regExp = /^.*(youtu\.be\/|v\/|u\/\w\/|embed\/|watch\?v=|\&v=)([^#\&\?]*).*/;
    var match = url.match(regExp);
    if (match && match[2].length === 11) {
        return match[2];
    } else {
        return 'error';
    }
}

// 确保DOM加载完成后执行
$(document).ready(function() {
    var videoUrl = '{{ cours.videoIntro }}';
    // 先检查模板变量是否正确渲染了URL
    console.log('当前视频URL：', videoUrl);
    var myId = getId(videoUrl);
    $('#myId').text(myId); // 用text()代替html()更安全，避免XSS风险
    $('#myCode').html('<iframe width="560" height="315" src="//www.youtube.com/embed/' + myId + '" frameborder="0" allowfullscreen></iframe>');
});
</script>

额外提示 #

• 打开浏览器的开发者工具（F12），查看Console面板，看看有没有报错，同时可以检查{{ cours.videoIntro }}是否正确渲染成了实际的YouTube URL——如果模板变量没输出内容，脚本自然也无法正常工作。
• 用text()设置YouTube ID比html()更安全，避免如果ID里有特殊字符导致的问题。

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