js 如何提取富文字里的圖片路徑

维维WW發表於2024-03-22
JS

在JavaScript中，要從富文字內容中提取圖片路徑，你可以建立一個DOM元素來作為解析富文字內容的容器，然後將富文字內容作為文字節點插入這個容器中。接著，你可以使用querySelectorAll方法和CSS選擇器來選擇所有的img元素，並獲取它們的src屬性。

以下是一個簡單的示例程式碼

function extractImagePaths(richTextContent) {
  // 建立一個臨時的div容器
  const tempDiv = document.createElement('div');
  
  // 將富文字內容設定為div的內部文字
  tempDiv.innerHTML = richTextContent;
  
  // 查詢所有的img元素
  const images = tempDiv.querySelectorAll('img');
  
  // 提取並返回所有圖片的路徑
  return Array.from(images).map(img => img.src);
}
 
// 示例富文字內容
const richText = `
  <p>這裡是文字內容...</p>
  <img src="path/to/image1.jpg" alt="圖片1">
  <img src="path/to/image2.jpg" alt="圖片2">
`;
 
// 使用函式提取圖片路徑
const imagePaths = extractImagePaths(richText);
 
console.log(imagePaths); // ["path/to/image1.jpg", "path/to/image2.jpg"]

這段程式碼定義了一個extractImagePaths函式，它接受富文字內容作為引數，返回一個包含所有圖片路徑的陣列。在這個例子中，richText變數包含了富文字內容，extractImagePaths函式處理這個內容並返回一個包含圖片路徑的陣列。

相關文章