Question

我有一个页面模板，该模板使用PHP从外部网站提取数据，并使用HTML呈现页面布局。

某些要提取的数据无法在源端更改。因此，我需要在呈现的实际网站上进行更改。

我需要更改的数据实质上是一个“状态”。并编码如下：

<span id="property-status"><?php echo $property['status']; ?></span>

来自来源的状态有以下三种：

已出售，已关闭和处于活动状态

我需要将“已出售”和“已关闭”更改为“已付款”。

问题是当开发人员最终无法更改它时，如何使用jQuery实现此功能。

Answer 1

如果是字符串。请尝试使用正则表达式/\>(.*?)\</gmi和String.replace()函数

var obj ={'sold':'found','closed':'found'};

var a ='<span id="property-status">CLOSED</span>';

var res = a.replace(/\>(.*?)\</gmi,((a,b)=> '>'+obj[b.toLowerCase()]+'<'));
console.log(res)

或者通过html使用trim()删除不需要的空间

var obj ={'sold':'found','closed':'found'};
 $('#property-status').text(obj[$('#property-status').text().trim().toLowerCase()])

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span id="property-status">sold </span>

Answer 2

当然，您可以在客户端通过比较以下元素的文本来做到这一点：

$(document).ready(function() {

  // Your element 
  var status = $("#property-status");
  // It's text without spaces and to uppercase, for the comparison
  var status_text = status.text().trim().toUpperCase();

  if (status_text == "SOLD" || status_text == "CLOSED") {
    status.text("FUNDED");
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<span id="property-status">Sold</span>

但是！ ...您还可以在服务器端使用PHP函数来做到这一点：

<?php
function fixStatus($status){

  // Text without space and to uppercase
  $status_to_compare = trim(strtoupper(status));

  if($status_to_compare=="CLOSED" || $status_to_compare=="SOLD"){
    return "FUNDED";
  }else{
    return $status;
  }
}
?>

<span id="property-status"><?php echo fixStatus($property['status']); ?></span>

PHPFiddle

使用jQuery替换HTML元素内的文本

2 个答案: