如果存在，则显示路径的拆分文本，否则不显示

Question

我需要动态显示用户输入的路径的名称和分割路径。 为此，我拆分了用户输入的路径并仅抓取其中的一部分。例如如果用户输入路径为：

/content/mypath/myfolder/about/images/abc.jpg 然后我正在显示 images/abc.jpg。

但是，假设用户只输入名称而不输入路径，在这种情况下至少应该附加并显示名称。

但是当我尝试这样做时会引发错误。

未捕获的类型错误：无法读取 null 的属性“0”

$(document).ready(function(){
  $('#getData').click(function(){
    var name = $('#name').val();
    var imgPath = $('#imgPath').val();
    var newPath = imgPath.match(/images\/.*$/i)[0];
    $('.container').append(
      $('<p>').text(name),
      $('<p>').text(newPath, function(){
        return /^\/images/.test(newPath) ? src :$('#imgPath').val();
      })
    );
    //console.log(slicedPath);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
Name: <input type="text" id="name">
Image path: <input type="text" id="imgPath">
<div class="container">

</div>
<button id="getData">Click</button>

未捕获的类型错误：无法读取 null 的属性“0”

Answer 1

你的问题出在这一行

var newPath = imgPath.match(/images\/.*$/i)[0];

您正在尝试使用正则表达式运行匹配，然后选择第一个结果，即 [0] 位置。因此，当没有结果时，您尝试在没有结果时获取 [0] 位置。

只需删除行尾的 [0] 即可

var newPath = imgPath.match(/images\/.*$/i);